<template>
  <div class="container">
    <div class="app-container">
      <!--
        树形组件:
        data: 用来指定树形数据的
        props: 用来指定渲染节点数据的属性名, 以及表示层级关系的属性名, 默认是 label 和 children
        default-expand-all: 默认展开所有节点
       -->
      <el-tree :expand-on-click-node="false" default-expand-all :data="depts" :props="defaultProps">
        <template v-slot="{ data }">
          <el-row style="width: 100%">
            <el-col :span="21">{{ data.name }}</el-col>
            <el-col :span="3">
              <el-row type="flex" justify="space-around">
                <span>管理员</span>
                <!-- $event 就是事件的第一个参数 -->
                <el-dropdown @command="hCommand($event, data.id)">
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                    <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                    <el-dropdown-item command="del">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <AddDept ref="addDept" :current-id="currentId" :show-dialog.sync="showDialog" @updateData="loadData()" />
  </div>
</template>
<script>
import { transListToTree } from '@/utils'
import { delDepartment, getDepartments } from '@/api/department'
import AddDept from './add-dept.vue'
export default {
  name: 'Department',
  components: {
    AddDept
  },
  data() {
    return {
      showDialog: false, // 控制弹层显示隐藏
      depts: [],
      defaultProps: {
        children: 'children', // 表示层级关系的属性名
        label: 'name' // 渲染节点文本的属性名
      },
      // currentId: '' // -1
      currentId: ''
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      const res = await getDepartments()
      // console.log(res) // 是平铺数据
      // 调用函数后得到一个树形数据: [ { name, ..., children: [] } ]
      this.depts = transListToTree(res)
    },
    async hCommand(type, id) {
      // 获取当前被点击的部门 id
      // console.log(type, id)
      if (type === 'add') {
        // 弹出 dialog
        this.showDialog = true
        // 传递当前被点击的部门 id, 作为新部门的 pid
        this.currentId = id
      } else if (type === 'edit') {
        // 点击的是编辑
        // 弹出 dialog
        this.showDialog = true
        // 传递当前被点击的部门 id
        this.currentId = id
        // DOM 更新是异步的, Props 单向数据流的更新也是异步的
        // 结论: props 和 DOM 更新都是异步的
        // 调用子组件获取详情的方法
        // ref 有两个作用:
        // 1. 可用于获取 DOM 元素
        // 2. 可用于获取组件对象
        // console.log('父组件:', this.currentId)
        this.$nextTick(() => {
          this.$refs.addDept.getDetail()
        })
      } else {
        // 点击的是删除
        // 用户点击确认会进入 .then 的回调函数
        // 用户点击取消会进入 .catch 的回调函数
        await this.$confirm('真的要删除吗?呜呜呜', '提示')
        // console.log('用户点击了确认')
        await delDepartment(id)
        // 提示用户
        this.$message.success('删除成功')
        // 重新获取数据
        this.loadData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
